const state = document.querySelector('.state');
const toggleButton = document.querySelector('.toggle-button');

toggleButton.addEventListener('click', () => handler('changeDesignMode'));
document.addEventListener('DOMContentLoaded', () => handler('getDesignMode'));

function handler(type) {
  // chrome.tabs.query可以通过回调函数获得当前页面的信息tabs
  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
    const activeTab = tabs[0].id;
    chrome.tabs.sendMessage(activeTab, { type }, (designMode) => {
      // console.log(designMode);
      state.innerHTML = `当前页面可编辑状态:${designMode ?? 'off'}`;
      toggleButton.textContent = designMode === 'off' ? '开启编辑': '关闭编辑';
    });
  });
}
